<template>
  <view>
    <uni-swipe-action ref="swipeAction">
      <!--   费用类商品禁止删除   -->
      <uni-swipe-action-item
        v-for="(item, index) in curOrderItemsDetailData"
        :key="index"
        :right-options="swipeOptions"
        :disabled="!editorStatus || item.buyyerCount==0"
        @click="swipeClick($event, index, item)"
      >
        <view
          class="suk-con"
          @click.stop="
            !editorStatus
              ? viewGoodDetailFn(
                item.productId,
                item.enumTempProduct,
                item.orderNo,
                item.initSalePrice,
                item.unitName
              )
              : ''
          "
        >
          <view class="sku-pic"><image :src="item.productPic" /></view>
          <view class="sku-name">{{ item.productName }}</view>
          <view class="sku-code">编码：<text>{{ item.productCode }}</text></view>
          <view class="sku-spec"><text class="text-l">规格：</text><view class="text-r">{{ item.productModel }}</view></view>
          <view class="sku-price">¥{{ curOrderDetailData.showProductPrice && curOrderDetailData.showProductPrice == 1 ? item.initSalePrice : '*.*' }}/{{ item.unitName }}</view>
          <view
            v-if="!editorStatus"
            class="sku-num"
          >x<text>{{ item.buyyerCount }}</text></view>
          <view v-if="editorStatus" class="sku-num-change">
            <uni-number-box
              :value="item.buyyerCount"
              :min="0"
              :max="setMaxNumFn(item.qtyScale)"
              :step="Math.pow('10', item.qtyScale * -1)"
              :disabled="item.serviceMaterials == 39825 || item.enumTempProduct != 0"
              @change="changeNumFn($event, index)"
            />
          </view>
          <view v-if="showWarehouseLabel" class="sku-stock">{{
            item.stockName
          }}</view>
        </view>
      </uni-swipe-action-item>
    </uni-swipe-action>
    <view
      v-if="viewAllGoodsVisible && totalRecord > 3"
      class="all-goods"
      @click.stop="!editorStatus ? viewAllGoodsFn(curOrderItemsDetailData[0].orderNo) : ''"
    >
      查看全部商品<text class="font_family icon-a-arrowright_tongyong_2" />
    </view>
  </view>
</template>

<script>
export default {
  name: 'OrderProductItem',
  props: {
    allGoodsPagePath: {
      type: String,
      default: ''
    },
    orderItemsDetailData: {
      type: Array,
      default: null
    },
    orderDetailData: {
      type: Object,
      default: null
    },
    showWarehouseLabel: {
      type: Boolean,
      default: true
    },
    editorStatus: {
      type: Boolean,
      default: false
    },
    /*查看全部商品展示隐藏*/
    viewAllGoodsVisible: {
      type: Boolean,
      default: true
    },
    totalRecord: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      swipeOptions: [{
        text: '删除',
        style: {
          backgroundColor: '#fa5151'
        }
      }]
    }
  },
  computed: {
    curOrderItemsDetailData() {
      return this.orderItemsDetailData
    },
    curOrderDetailData() {
      return this.orderDetailData
    },
  },
  methods: {
    /*计算商品可选最多数量*/
    setMaxNumFn(qtyScale) {
      return Math.floor(9999.99999999 * Math.pow(10, qtyScale)) / Math.pow(10, qtyScale)
    },
    changeNumFn(val, index) {
      if (!val) {
        this.$u.toast('输入错误请重新输入')
      }
      this.curOrderItemsDetailData[index].buyyerCount = val;
      this.$emit('update:order-items-detail-data', this.curOrderItemsDetailData)
    },
    viewGoodDetailFn(productId, enumTempProduct, orderNo, initSalePrice, unitName) {
      uni.navigateTo({
        url: '/goodsPages/snapshot?skuUuid=' + productId + '&enumTempProduct=' + enumTempProduct + '&orderNo=' + orderNo + '&initSalePrice=' + initSalePrice + '&unitName=' + unitName
      });
    },
    /*查看全部商品*/
    viewAllGoodsFn(orderNo) {
      uni.navigateTo({
        url: this.allGoodsPagePath + '?orderNo=' + orderNo + '&showProductPrice=' + this.curOrderDetailData.showProductPrice
      });
    },
    swipeClick(e, index, row) {
      const {
        content
      } = e;
      if (content.text === '删除') {
        uni.showModal({
          title: '提示',
          content: '是否删除',
          success: res => {
            if (res.confirm) {
              /*费用类商品禁止删除*/
              if (row.serviceMaterials == 39825) {
                this.$u.toast('【费用类】商品不可操作删除,请联系销售')
                return
              }
              /*临采商品禁止删除*/
              if (row.enumTempProduct != 0) {
                this.$u.toast('此商品如需删除请与客服联系')
                return
              }
              if (this.curOrderItemsDetailData.length == 1 && this.totalRecord <= 3) {
                this.$u.toast('该订单仅含一条商品，不支持删除，请联系销售修改')
                return
              }
              this.curOrderItemsDetailData[index].buyyerCount = 0;
              this.$emit('update:order-items-detail-data', this.curOrderItemsDetailData)
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      }
    }
  }
}
</script>
<style scoped lang="scss">
.all-goods {
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  color: #aaa;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  .font_family {
    font-size:$uni-font-size-lg;
    color:$uni-text-color-tips;
  }
}
.suk-con {
  position: relative;
  padding: 0 20rpx 15rpx 180rpx;
  line-height: 34rpx;
  /*#ifdef MP-ALIPAY*/
  width: 550rpx;
  /*#endif*/
  margin-bottom: 20rpx;
  .sku-name {
    line-height: 36rpx;
  }
  .sku-pic {
    position: absolute;
    width: 140rpx;
    height: 140rpx;
    left: 20rpx;
    top: 0;
    image {
      width: 140rpx;
      height: 140rpx;
    }
  }
  .sku-code {
    font-size:$uni-font-size-sm;
    color: $uni-grey-aaa;
    padding:6rpx 0 0;
    clear: both;
  }
  .sku-spec {
    display: inline-block;
    font-size:$uni-font-size-sm;
    color: $uni-grey-aaa;
  }
  .sku-price {
    font-size:$uni-font-size-lg;
    color: $uni-orange;
    font-weight: bold;
    padding-top:8rpx;
  }
  .sku-num {
    font-size:$uni-font-size-sm;
    text-align: right;
    position: absolute;
    right: 18rpx;
    bottom:15rpx;
    color: $uni-grey-999;
  }
  .sku-stock {
    color: $uni-orange;
    height: 28rpx;
    line-height: 28rpx;
    background: $uni-bg-color;
    border: 1px solid $uni-orange;
    border-radius: 4rpx;
    padding: 0 4rpx;
    position: absolute;
    bottom: 63rpx;
    right: 18rpx;
  }
  .sku-num-change {
    position: absolute;
    bottom:15rpx;
    right: 10rpx;
    /deep/ input {
      height: 32rpx;
      font-size: 24rpx;
    }
    /deep/ view {
      padding: 0 8rpx;
    }
  }
  .text-l{
    float: left;
  }
  .text-r{
    float: left;
    width: 310rpx;
    word-break: break-all;
    overflow: hidden;
  }
}
</style>
